<template>
	<view class="record margin-md">
		<uv-steps direction="column" dot :current="total">
			<uv-steps-item v-for="item in list" :key="item.id">
				<template v-slot:title>
					<view>{{ item.start_at }}</view>
				</template>
				<template v-slot:desc>
					<view>{{ item.title }}</view>
					<view>
						<text v-if="item.num" style="margin-right: 20rpx">{{ item.num }}{{ item.unit }}</text>
						<text v-if="item.start_at && item.end_at" style="margin-right: 20rpx">{{ minuteFormat(item.start_at, item.end_at) }}分钟</text>
					</view>
					<view class="font-size-sm">{{ item['remark'] }}</view>
					<view class="date-label">
						<uv-tags size="mini" :text="startFormat(item.start_at)"></uv-tags>
					</view>
				</template>
			</uv-steps-item>
		</uv-steps>
	</view>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue';
import { queryRecords } from '@/api';
import { onHide, onLoad, onPullDownRefresh, onReachBottom, onShow, onUnload } from '@dcloudio/uni-app';
import dayjs from '@/utils/dayjs';

var list = ref<any[]>([]);
var total = ref(0);
var pageParams = reactive({
	page_index: 1,
	page_size: 10
});

onShow(() => {
	// 监听事件
	uni.$on('refresh', () => {
		pageParams.page_index = 1;
		list.value = [];
		requestListData();
	});
});

onHide(() => {
	uni.$off('refresh');
});

onMounted(() => {
	_refresh();
});

// 加载列表数据
async function requestListData() {
	try {
		const { data: result } = (await queryRecords(pageParams)) as any;
		list.value = [...list.value, ...result.rows];
		total.value = result.total;
		return result;
	} catch (error) {
		//TODO handle the exception
		return error;
	}
}

// 格式化已过去的时长
function startFormat(start_at: string) {
	return dayjs(start_at).fromNow(true);
	// return dayjs().format('HH:mm YYYY-MM-DD ')
}

// 开始结束时间间隔
function minuteFormat(start_at: string, end_at: string) {
	if (start_at && end_at) {
		const start = dayjs(start_at);
		const end = dayjs(end_at);
		return end.diff(start, 'm');
	}
	return 0;
}

// 刷新
function _refresh() {
	pageParams.page_index = 1;
	list.value = [];
	return requestListData();
}

// 下一页数据
function _nextPage() {
	if (list.value.length < total.value) {
		pageParams.page_index += 1;
		return requestListData();
	}
}

defineExpose({ _nextPage, _refresh });
</script>
<script lang="ts">
export default {
	options: {
		styleIsolation: 'shared' // 解除样式隔离
	}
};
</script>
<style lang="scss" scoped>
.record {
	::v-deep(.uv-steps) {
		.uv-steps-item {
			// padding-md margin-md border-radius-md
			padding-bottom: 40rpx;

			.uv-steps-item__content {
				padding: 40rpx;
				background-color: white;
				border-radius: 30rpx;
				margin-left: 20rpx !important;
			}

			.uv-steps-item__wrapper {
				background-color: transparent;
				margin-top: 40rpx;
			}

			.uv-steps-item__line--column {
				top: 60rpx;
			}
		}
	}

	.date-label {
		position: absolute;
		right: 0rpx;
		top: 50rpx;
		transform: rotate(45deg);
	}
}
</style>
